<template>
    <!-- 主要内容 -->
    <div class="pb-20 flex flex-col items-center">
      <!-- 图片轮播占位 -->
      <div class="relative h-64 bg-gray-200 overflow-hidden w-full max-w-md">
        <div class="w-full h-full flex items-center justify-center text-gray-500">
          <div class="text-center">
            <div class="text-sm">站点图片轮播区域</div>
          </div>
        </div>
      </div>

          <!-- 站点名称 -->
          <div class="px-4 py-3 bg-white max-w-md w-full">
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 10h6m-6 4h6"/>
                  <circle cx="8" cy="8" r="1" fill="currentColor"/>
                  <circle cx="16" cy="8" r="1" fill="currentColor"/>
                </svg>
              </div>
              <h1 class="text-xl font-bold text-gray-900">上海浦东充电站</h1>
            </div>
          </div>

      <!-- 基本信息卡片 -->
      <div class="relative rounded-2xl bg-white border-2 border-gray-200 shadow-sm overflow-hidden mt-4 max-w-md w-full">
        <div class="p-4">
          <div class="flex items-center gap-2 mb-4">
            <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
            <span class="font-medium text-gray-900">基本信息</span>
          </div>

          <div class="space-y-6">
            <!-- 运营商 -->
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                </svg>
              </div>
              <div class="flex-1">
                <div class="text-sm font-medium text-gray-900 mb-1">运营商</div>
                <div class="text-sm text-gray-700">苏州飞易智能系统有限公司</div>
              </div>
            </div>

            <!-- 详细地址 -->
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                </svg>
              </div>
              <div class="flex-1">
                <div class="text-sm font-medium text-gray-900 mb-1">详细地址</div>
                <div class="text-sm text-gray-700">苏州市吴中区秤盘新村</div>
                <div class="text-sm text-gray-500">坐标: 120.632454N 31.267841E</div>
              </div>
            </div>

            <!-- 运营时间 -->
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
              </div>
              <div class="flex-1">
                <div class="text-sm font-medium text-gray-900 mb-1">运营时间</div>
                <div class="text-sm text-gray-700">周一至周日 00:00 - 24:00</div>
              </div>
            </div>

            <!-- 联系电话 -->
            <div class="flex items-center gap-3">
              <div class="w-8 h-8 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                </svg>
              </div>
              <div class="flex-1">
                <div class="text-sm font-medium text-gray-900 mb-1">联系电话</div>
                <div class="text-sm text-gray-700">400-89739812</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 技术信息卡片 -->
      <div class="relative rounded-2xl bg-white border-2 border-gray-200 shadow-sm overflow-hidden mt-4 max-w-md w-full">
        <div class="p-4">
          <div class="flex items-center gap-2 mb-4">
            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
            <span class="font-medium text-gray-900">技术信息</span>
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">运营类型</div>
              <div class="text-sm font-medium text-gray-900">公共充电站</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">建设场所</div>
              <div class="text-sm font-medium text-gray-900">居民小区</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">接入方式</div>
              <div class="text-sm font-medium text-gray-900">380V</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">站点位置</div>
              <div class="text-sm font-medium text-gray-900">地面停车场</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">站点类型</div>
              <div class="text-sm font-medium text-gray-900">交流充电桩</div>
            </div>
            <div class="bg-gray-50 rounded-lg p-3">
              <div class="text-xs text-gray-600 mb-1">枪桩数量</div>
              <div class="text-sm font-medium text-gray-900">10</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 计费规则卡片 -->
      <div class="relative rounded-2xl bg-white border-2 border-gray-200 shadow-sm overflow-hidden mt-4 max-w-md w-full">
        <div class="p-4">
          <div class="flex items-center gap-2 mb-4">
            <div class="w-2 h-2 bg-orange-500 rounded-full"></div>
            <span class="font-medium text-gray-900">计费规则</span>
          </div>

          <!-- 时段定义 -->
          <div class="mb-4">
            <div class="text-sm text-gray-600 mb-3">时段划分</div>
            <div class="space-y-2">
              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-red-50 to-orange-50 rounded-lg">
                <div class="flex items-center gap-2">
                  <div class="w-2 h-2 bg-red-500 rounded-full"></div>
                  <span class="text-sm font-medium text-gray-900">尖</span>
                </div>
                <span class="text-sm text-gray-700">12:00 - 18:00</span>
              </div>
              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg">
                <div class="flex items-center gap-2">
                  <div class="w-2 h-2 bg-orange-500 rounded-full"></div>
                  <span class="text-sm font-medium text-gray-900">峰</span>
                </div>
                <span class="text-sm text-gray-700">00:00 - 06:00</span>
              </div>
              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-lg">
                <div class="flex items-center gap-2">
                  <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span class="text-sm font-medium text-gray-900">平</span>
                </div>
                <span class="text-sm text-gray-700">18:00 - 24:00</span>
              </div>
              <div class="flex items-center justify-between p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg">
                <div class="flex items-center gap-2">
                  <div class="w-2 h-2 bg-purple-500 rounded-full"></div>
                  <span class="text-sm font-medium text-gray-900">谷</span>
                </div>
                <span class="text-sm text-gray-700">06:00 - 12:00</span>
              </div>
            </div>
          </div>

          <!-- 价格表 -->
          <div>
            <div class="text-sm text-gray-600 mb-3">价格标准</div>
            <div class="grid grid-cols-2 gap-3">
              <div class="bg-gray-50 rounded-lg p-3">
                <div class="text-xs text-gray-600 mb-2">电费单价 (元/度)</div>
                <div class="space-y-1">
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">尖</span>
                    <span class="text-sm font-medium text-gray-900">¥0.9</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">峰</span>
                    <span class="text-sm font-medium text-gray-900">¥0.9</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">平</span>
                    <span class="text-sm font-medium text-gray-900">¥0.9</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">谷</span>
                    <span class="text-sm font-medium text-gray-900">¥0.9</span>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 rounded-lg p-3">
                <div class="text-xs text-gray-600 mb-2">服务费单价 (元/度)</div>
                <div class="space-y-1">
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">尖</span>
                    <span class="text-sm font-medium text-gray-900">¥0.4</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">峰</span>
                    <span class="text-sm font-medium text-gray-900">¥0.4</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">平</span>
                    <span class="text-sm font-medium text-gray-900">¥0.4</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <span class="text-xs text-gray-500">谷</span>
                    <span class="text-sm font-medium text-gray-900">¥0.4</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>